<template>
  <div class="login">
    <img src="../../assets/login.png" alt="">
    <div class="right">
      <el-form :model="form" class="loginform" ref="ruleFormRef">
      <el-form-item prop='adminname'>
        <el-input v-model="form.adminname" placeholder="请输入用户名"/>
      </el-form-item>
       <el-form-item prop='password'>
        <el-input v-model="form.password" show-password placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive } from "vue";

import { useRouter } from 'vue-router'

var form=ref({adminname:'',password:''})

var $router=useRouter()
var onSubmit=()=>{
   if(form.value.adminname==""||form.value.password==""){
      ElNotification({
          title:'登录通知',
          message:"请输入账号密码",
          type:'error',
          duration: 1500
        })
   }else{
      ElNotification({
          title:'登录通知',
          message:"登录成功",
          type:'success',
          duration: 1500
        })
        $router.push('/index/home')
   }

}
</script>

<style scoped lang='scss'>
.login {
  height: 100%;
  background-color: #f5f8ff;
  display: flex;
  .right{
    margin-top: 300px;
  }
  .loginform{
    background-color: white;
    padding: 30px;
    border-radius: 5%;
    width: 300px;
  }
  .el-button {
        width: 100%;
  }
}
</style>